<template>
  <div id="Login">
    <el-row>
      <el-col :span="10" :offset="7">
        <!--     在登录的上面写轮播图   -->
        <div class="block">
          <el-carousel height="220px" weight="400px">
            <el-carousel-item v-for="item in 4" :key="item">
              <img src="../assets/img/img02.jpg" alt="加载中" height="220px" width="580px">
            </el-carousel-item>
          </el-carousel>
        </div>
        <br>
        <br>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" :offset="8">
        <!--    登录的主要逻辑        -->
        <div class="grid-content bg-purple-light" id="theLogin">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item prop="age" label="用户名">
              <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="密 码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off" @change="submitForm"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm">登录</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
              <!--            弹出框:找回密码的框                -->
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button type="text" @click="dialogVisible = true" class="forgetpwd">忘记密码？</el-button>
            </el-form-item>
          </el-form>
          <!--        点击忘记密码  ：获取验证码的框          -->
          <el-dialog
            title="找回密码"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form class="demo-ruleForm">
              <el-form-item label="用户名">
                <el-input v-model="username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="email" @change="getCode"></el-input>
              </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                         <el-button @click="getCode" type="primary"> 获取验证码 </el-button>
                        </span>
          </el-dialog>
          <!--           输入用户名  -密码- 验证码，修改密码         -->
          <el-dialog
            title="重置密码"
            :visible.sync="dialogVisible2"
            :before-close="handleClose"
            width="35%"
          >
            <el-form class="demo-ruleForm">
              <el-form-item label="用户名">
                <el-input
                  :value="username"
                  :disabled="true">
                </el-input>
                <!--   用户名默认是刚才操作的用户  -->
              </el-form-item>
              <el-form-item label="验证码">
                <el-input v-model="code"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="re_password" type="password" @change="setPassword"></el-input>
              </el-form-item>
              <!--    对两次密码不一致进行提示    -->
              <p style="color: red">{{msg}}</p>

            </el-form>

            <span slot="footer" class="dialog-footer">
                         <el-button @click="setPassword" type="primary"> 确定修改 </el-button>
                        </span>
          </el-dialog>
          <!--      中间位置结束    -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  //从router下index.js中按需导入方法，该方法实现添加路由
  import { initRoutes } from '@/router'

  export default {
    name: 'LoginView',
    data () {

      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户不能为空'))
        }

      }//登录框自带的
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        }
        // } else {
        //   if (this.ruleForm.checkPass !== '') {
        //     this.$refs.ruleForm.validateField('checkPass')
        //   }
        callback()

      }//登录框自带的
      return {
        //控制对话框的显示和隐藏
        dialogVisible2: false,
        dialogVisible: false,
        imgs: [1, 2, 3, 4],
        msg: '',
        email: '',
        username: '',
        code: '',
        password: '',
        re_password: '',
        ruleForm: {
          age: '',
          pass: ''
        },//登录框自带的
        rules: {
          pass: [
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],

          age: [
            {
              validator: checkAge,
              trigger: 'blur'
            }
          ]
        }//登录框自带的
      }
    },//data
    methods: {
      submitForm () {
        if (this.ruleForm.age === '' || this.ruleForm.pass === '') {
          this.$message.error('用户明或密码为空！！')
          return
        }
        this.$axios({
          method: 'post',
          url: this.$settings.base_url + '/user/login/',
          data: {
            'username': this.ruleForm.age,
            'password': this.ruleForm.pass
          }
        }).then(res => {
          if (res.data.code === 100) {
            // this.$cookies.set("oatoken", res.data.data.token, '7d')
            sessionStorage.setItem('oatoken', res.data.token)
            sessionStorage.setItem('oaid', res.data.id)
            sessionStorage.setItem('oapart', res.data.part)
            //调用store中的方法setRightList,后面是传递的数据
            this.$store.commit('setRightList', res.data.right)
            this.$store.commit('setUsername', res.data.data.username)
            this.$store.commit('setIcon', res.data.data.icon)
            //调用store中的index.js的方法，push路由
            console.log(res)
            initRoutes()
            this.$message.success('登录成功')
            this.$router.push('/home/')
          } else {
            this.$message.error('用户名或密码错误！！')
          }
        }).catch(error => {
          console.log(error)
          this.$message.error('系统出现未知错误，请联系管理员！！')
        })
      },
      //重置框
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      //获取验证码
      getCode () {
        if (this.email !== '' && this.username !== '') {
          this.$axios({
            method: 'post',
            url: this.$settings.base_url + '/user/checkemail/',
            data: {
              'username': this.username,
              'email': this.email
            }
          }).then(res => {
            if (res.data.code === 100) {
              //邮箱和用户名匹配上了
              this.$notify({
                title: '成功',
                message: '验证码发送成功，10分钟内有效',
                type: 'success'
              })
              //控制对话框的显示和隐藏的
              this.dialogVisible = false
              //只有获取到验证码后，才会弹出修改密码的框
              this.dialogVisible2 = true
            } else {
              this.$message({
                message: '用户名和邮箱不匹配',
                type: 'error'
              })
            }
          }).catch(error => {
            console.log(error)
            // this.$message({
            //          message: '用户名和邮箱不匹配',
            //          type: 'error'
            //      })
          })
        } else {
          alert('用户名和邮箱不能为空')
        }
      },
      //设置用户的密码
      setPassword () {
        if (this.msg === '') {
          if (this.code && this.password && this.re_password) {
            if (this.password === this.re_password) {
              this.$axios({
                method: 'put',
                url: this.$settings.base_url + '/user/checkemail/',
                data: {
                  'username': this.username,
                  'password': this.password,
                  'comfirepassword': this.re_password,
                  'code': this.code
                }
              }).then(res => {
                if (res.data.code === 100) {
                  this.$notify({
                    title: '成功',
                    message: '修改密码成功',
                    type: 'success'
                  })
                  //修改密码成功后，将修改密码的框关闭
                  this.dialogVisible2 = false
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.error
                  })
                }
              }).catch(function () {
                this.$message({
                  type: 'error',
                  message: '出错了'
                })
              })
            } else {
              this.$message({
                type: 'error',
                message: '两次密码不一致'
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: '所有信息都必须填写'
            })
          }
        } else {
          this.$message({
            type: 'error',
            message: '两次密码不一致'
          })
        }
      },
      //对话框自带的函数
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
            console.log(_)
          })
          .catch(_ => {
            console.log(_)
          })
      }
    },//methods
    watch: {
      //监听data中的数据，如果两次密码不一致给出提示
      re_password: (function (newVal) {
        if (newVal !== this.password) {
          this.msg = '两次密码不一致'
        } else {
          this.msg = ''
        }
      }),
      password: (function (newVal) {
        if (newVal !== this.re_password) {
          this.msg = '两次密码不一致'
        } else {
          this.msg = ''
        }
      })
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  #Login {
    /*登录界面的背景*/
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    width: 100vm;
    /* 基于浏览器宽度，铺满 */
    height: 100vh;
    /* 基于浏览器高度，铺满 */
  }

  #theLogin {
    text-align: center;
    margin: 0 auto;
  }

  .forgetpwd {
    color: #475669;
  }

  .forgetpwd:hover {
    color: white;
  }
</style>
